import React from "react";
import { Modal, Button, Row, Card } from "antd";
import UserTree from "components/usertree/UserTree";
import UsersTags from "components/usersTags/UsersTags";
import { openNotificationWithIcon } from "utils/comm";
import OrganizationTree from "components/usertree/OrganizationTree";
import TreeSelect from "components/flowdetailpannel/TreeSelect";
import styles from "./UserSelectModal.less";

class UserSelectModal extends React.Component {

  treeRef = '';

  constructor(props) {
    super(props);
    this.checkedKeys = props.checkedKeys || [];
    this.state = {
      checkedNodes: [],
    }
  }

  // eslint-disable-next-line
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { visible } = this.props;
    if (!visible && nextProps.visible) {
      this.checkedKeys = nextProps.checkedKeys;
      this.setState({ checkedNodes: nextProps.checkedNodes });
    }
  }

  handleOk = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const { onOk } = this.props;
    const { checkedNodes } = this.state
    const { selectNumLimit } = this.props;
    if(selectNumLimit && checkedNodes.length > selectNumLimit) {
      openNotificationWithIcon("warning", "", `已选择人员数量超出限制：${selectNumLimit}个！请检查`);
    } else {
      onOk(this.checkedKeys, checkedNodes);
      this.handleCancel(true);
    }
  }

  handleCancel = () => {
    const { onCancel } = this.props;
    onCancel();
  }

  getTreeRef = (treeThis) => {
    this.treeRef = treeThis;
  }

  checkTree = (checkedKeys, checkedNodes) => {
    this.checkedKeys = checkedKeys
    this.setState({ checkedNodes })
  }

  clear = () => {
    this.checkedKeys = []
    this.setState({ checkedNodes: [] });
  }

  tagClose = (removedTag) => {
    const { checkedNodes } = this.state;
    const aftercheckedNodes = checkedNodes.filter(tag => tag !== removedTag);
    this.checkedKeys = aftercheckedNodes.map((item) => (item.key))
    this.setState({ checkedNodes: aftercheckedNodes });
  }

  renderFooter = () => {
    return (
      <div>
        <Button style={{ marginRight: 10 }} onClick={this.handleCancel}>取消</Button>
        <Button type="primary" onClick={() => { this.handleOk() }}>确定</Button>
      </div>
    )
  }

  renderFooterModel = (type) => {
    const { dispatch } = this.props;
    switch (type) {
      case 'organ':
        return (
          <OrganizationTree
            getTreeRef={this.getTreeRef}
            dispatch={dispatch}
            checkTreefunction={this.checkTree}
            checkedKeys={this.checkedKeys}
          />
        );
      case 'position':
        return (
          <TreeSelect
            getTreeRef={this.getTreeRef}
            dispatch={dispatch}
            directoryTree
            type="POSITION"
            checkedKeys={this.checkedKeys}
            checkTreefunction={this.checkTree}
            // onCheckedNodes={this.onCheckedNodes}
            // onCheckedRows={this.checkedKeys}
            // defaultSelectData={selectDatas}
          />
        );
      default :
        return (
          <UserTree
            getTreeRef={this.getTreeRef}
            dispatch={dispatch}
            checkTreefunction={this.checkTree}
            checkedKeys={this.checkedKeys}
          />
        );
    }

  }

  render() {
    const { visible, title = '授权用户', type = 'user'} = this.props;
    const { checkedNodes } = this.state;
    return (
      <Modal
        title={title}
        visible={visible}
        onOk={this.handleOk}
        onCancel={()=>{this.handleCancel(false)}}
        footer={this.renderFooter()}
        width='682px'
        centered
        wrapClassName={styles.modal}
      >
        <div className={styles.select_box}>
          <span className={styles.label}>{`已选${title}：`}</span>
          <div className={styles.user_list}>
            {checkedNodes.map(item => {
              const { props } = item
              return (
                <UsersTags
                  key={`${item.key}`}
                  label={props.title}
                  onClick={() => this.tagClose(item)}
                />
              )
            })}
          </div>
          {checkedNodes.length > 0 && <span className={styles.clear} onClick={this.clear}>清空</span>}
        </div>
        <Row style={{ height: 412 }}>
          <Card
            size="small"
            title={`选择${title}`}
            style={{ height: "100%" }}
            bodyStyle={{ height: 373, overflow: "auto" }}
          >
            { this.renderFooterModel(type) }
          </Card>
        </Row>
      </Modal>
    );
  }
}
export default UserSelectModal;
